import React, { Component } from 'react';
import { List, Avatar, Space, } from 'antd';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
import { getUsersListApi } from '../../apis/usersApi'

const IconText = ({ icon, text }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);
export default class OwnersList extends Component {
    state = {
        list: [],
        loading: false,
        total: 0,
        pageSize: 10,
        pageNumber: 1,
        avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    };
    componentDidMount() {
        this.getUsersList()
    };
    getUsersList = async (params) => {
        try {
            this.setState({ loading: true });
            const data = await getUsersListApi(params)
            const data2 = data.data
            this.setState({ loading: false, list: data2, pageSize: data.pageSize, pageNumber: data.pageNumber, total: data2.length })
            // console.log(this.state.list);
        } catch (error) {
            this.setState({ loading: false });
            console.log('error', error);
        }
    };
    goToChange(id) {
        this.props.history.push("/main/checkUser?id=" + id)
    };
    textaplay(txt) {
        if (txt == "no") {
            return "身份信息未完善"
        }
        if (txt == "aplay") {
            return "身份信息已填写待审核"
        }
        if (txt == "noway") {
            return "身份信息不完善已拒绝"
        }
        if (txt == "yes") {
            return "身份信息已核对通过"
        }
    }
    render() {
        return (
            <div style={{ backgroundColor: "white" }}>
                <List
                    itemLayout="vertical"
                    size="small"
                    pagination={{
                        onChange: page => {
                            console.log(page);
                        },
                        pageSize: 3,
                        defaultCurrent: 1,
                        total: this.state.total,
                    }}
                    dataSource={this.state.list}
                    renderItem={item => (
                        <List.Item
                            key={item._id}
                            actions={[
                                <IconText icon={SmileOutlined} text={item.praiseCount} key="list-vertical-star-o" />,
                                <IconText icon={FrownOutlined} text={item.badCount} key="list-vertical-like-o" />,
                            ]}>
                            <List.Item.Meta
                                avatar={<Avatar src={this.state.avatar} />}
                                title={<a href={item.href}>{item.name}   电话号码:{item.phone}</a>}
                                description={<p><b>地址：{item.address}</b> <b style={{ color: "red" }}>状态:{this.textaplay(item.checkStatus)}</b></p>}
                            />
                            {
                                <div className={item.checkStatus == "aplay" ? 'xianshi' : 'yincang'}>
                                    <button onClick={() => this.goToChange(item._id)}>去审核</button>
                                </div>
                            }
                        </List.Item>
                    )}
                />
            </div>
        )
    }
}
